<template>
  <div class="SliceCondition" @click="closeMenu">
    <div class="title">
      <div>切片等值线</div>
      <div style="cursor:pointer;" @click="closeTab"><el-icon><close /></el-icon></div>
    </div>
    <div class="top_title">工况:</div>
    <el-select no-data-text="无数据"  @change="changeSelect" v-model="pageData.show_index" class="m-2" placeholder="请选择"
               style="width: 295px;margin-bottom: 5px;">
      <el-option
          v-for="item in pageData.form_data_arr"
          :key="item.id"
          :label="item.name"
          :value="item.id"
      >
      </el-option>
    </el-select>
    <el-form :model="pageData.form_data" label-width="72px" class="font-color">
      <div class="form_gk">
        <div class="form_title">标注工况参数</div>
        <el-form-item label="名称:">
          <el-input v-model="pageData.form_data.name"></el-input>
        </el-form-item>
        <el-form-item label="自高:">
          <el-input type="number" v-model.number="pageData.form_data.font_height"></el-input>
        </el-form-item>
        <el-form-item label="字体:">
          <el-select v-model="pageData.form_data.font_size" placeholder="请选择" style="width: 240px;">
            <el-option :label="item.label" :value="item.value" :key="index"
                       v-for="(item,index) in pageData.form_data.font_size_arr">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数字格式:">
          <el-select v-model.number="pageData.form_data.number_format" placeholder="请选择" style="width: 240px;">
            <el-option :label="item.label" :value="item.value" :key="index"
                       v-for="(item,index) in pageData.form_data.number_format_arr">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="小数位数:">
          <el-input type="number" v-model.number="pageData.form_data.decimal"></el-input>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" size="small" @click="modifySetting(pageData.form_data.id||'')"
                   :disabled="!pageData.form_data.id">修改设置
        </el-button>
        <el-button size="small" type="success" :disabled="!pageData.form_data.id" @click="deleteSetting(pageData.form_data.id||'')">
          删　　除
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="reSetting" :disabled="!pageData.form_data.id">重新布置</el-button>
        <el-button size="small" type="success" @click="getBzList(pageData.form_data.id ||'')" :disabled="!pageData.form_data.id">标注管理
        </el-button>
      </el-form-item>
      <div class="form_gk">
        <div class="form_title">显示控制</div>
        <el-form-item>
          <el-button type="primary" size="small" @click="rotateUpDown" :disabled="!pageData.form_data.id">上下旋转
          </el-button>
          <el-button type="primary" size="small" @click="rotateLeftRight" :disabled="!pageData.form_data.id">左右翻转
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="success" @click="rotate" :disabled="!pageData.form_data.id">旋　　转</el-button>
          <el-button size="small" type="success" @click="resetData" :disabled="!pageData.form_data.id">恢复默认</el-button>
        </el-form-item>
        <el-form-item label="旋转角度">
          <el-input-number :step="0.1" :precision="1" type="number" :min="0" :max="180"
                           v-model="pageData.form_data.rotate"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="pageData.form_data.show_Dz" label="显示等值线" size="large"><span style="color: white;">显示等值线</span></el-checkbox>
          <el-checkbox v-model="pageData.form_data.show_Bz" label="显示标注" size="large"><span style="color: white;">显示标注</span></el-checkbox>
        </el-form-item>
      </div>
    </el-form>
    <!--    弹窗-->
    <el-dialog v-model="pageData.centerDialogVisible" title="等值线标注列表" width="50%" center>
      <el-table
          :data="pageData.tableData"
          border stripe
          style="width: 100%"
          max-height="350"
          highlight-current-row
          @row-contextmenu="openRightMenu"
          @row-click="closeMenu"
      >
        <el-table-column prop="dz_line" label="等值线"/>
        <el-table-column prop="eigen_value" label="特征值"/>
        <el-table-column prop="bz_index" label="标注序号"/>
        <el-table-column prop="bz_value" label="标注值">
          <template #default="scope">
            <span v-if="!scope.row.edit">  {{scope.row.bz_value}}</span>
            <el-input v-model="scope.row.bz_value" ref="edit_input"  v-else  @keyup.enter="editBzValue"/>
          </template>
        </el-table-column>
        <el-table-column prop="bz_position" label="位置"/>
        <el-table-column prop="id" label="ID"/>
      </el-table>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="pageData.centerDialogVisible = false">取消</el-button>
        <el-button type="primary">确定</el-button>
      </span>
      </template>
    </el-dialog>
    <!--右击-->
    <RightMenu :startX="pageData.rightMenuX" :startY="pageData.rightMenuY" :list="pageData.lists"
               :show="pageData.showRightMenu"
               @clickOperateMore="clickEvent"></RightMenu>
  </div>
</template>

<script>
import {nextTick, onMounted, reactive, ref, watchEffect, inject} from "vue";
import {deleteDzLine, deleteSettings, getDzxListById, getSliceCondition, saveBzValue, saveSettings} from "../api";
import RightMenu from "./RightMenu";
import {ElMessage, ElMessageBox} from "element-plus";

import {
  Close
} from '@element-plus/icons-vue'
export default {
  name: "SliceCondition",
  emits: ['receiveSliceConditionData','closeTab'],
  components: {
    RightMenu,
    Close
  },
  setup(props, context) {
    let pageData = reactive({
          form_data: {
            name: '',// 名称
            font_height: 0,// 字体高度
            font_size: '',// 字体
            font_size_arr: [],// 字体下拉数组
            number_format: '',// 数字格式
            number_format_arr: [],// 数字格式下拉数组
            decimal: 0,// 小数位数
            rotate: 0,// 翻转角度
            show_Dz: false,// 显示等值线
            show_Bz: false,// 显示标注
          },
          show_index: '',
          form_data_arr: [],
          centerDialogVisible: false,
          tableData: [],
          rightMenuX: 0,
          rightMenuY: 0,
          lists: [],
          currentRow: {},
          showRightMenu: false,
        }),
        edit_input=ref(null),
        catchEvent=inject('catchEvent'),
        changeSelect = (id) => {
          let form = pageData.form_data_arr.find(item => item.id === id);
          if (form) pageData.form_data = form;
        },
        getFormData = async () => {
          let {data: res} = await getSliceCondition();
          pageData.form_data_arr = res;
        },
        getBzList = async id => {
          if (id) {
            let {data: {data}} = await getDzxListById(id);
            if (data.length) {
              pageData.centerDialogVisible = true;
              pageData.tableData = data;
            }
          }
        },
        editBzValue=async (e) => {
         let {data}= await saveBzValue(pageData.currentRow);
          ElMessage({
            type: 'success',
            message: data.message,
          })
          pageData.currentRow.edit=false;
        },
        clickEvent = async (item) => {
          pageData.currentRow = item.data;
          if (item.clickIndex === "edit") {
            // 编辑
            pageData.tableData.forEach(d => {
              d.edit = d.id === item.data.id;
            })
            await nextTick()
            edit_input.value.focus();
            catchEvent('切片等值线工况组件--', 'clickEvent--右键修改', pageData.currentRow);
          } else if (item.clickIndex === "delete") {
            // 删除
            ElMessageBox.confirm(
                '确认删除吗?',
                '警告',
                {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                }
            ).then(async () => {
              let {data} = await deleteDzLine(item.data.id);
              ElMessage({
                type: 'success',
                message: data.message,
              })
            })
            // 删除之后重新获取
            await getDzxListById(pageData.form_data.id);
            catchEvent('切片等值线工况组件--删除', 'clickEvent--右键删除', pageData.currentRow);
          }
        },
        //关闭右菜单
        closeMenu = () => {
          pageData.showRightMenu = false;
        },
        //********************右键配置操作函数****************
        contextParams = async (event) => {
          let e = event || window.event;	//support firefox contextmenu
          pageData.showRightMenu = false;
          pageData.rightMenuX = e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
          pageData.rightMenuY = e.clientY + document.documentElement.scrollTop - document.documentElement.clientTop;
          event.preventDefault();
          event.stopPropagation();
          await nextTick();
          pageData.showRightMenu = true;

        },
        //右击
        openRightMenu = (row, column, event) => {
          pageData.lists = [
            {clickIndex: 'edit', headIcon: 'xiugai', label: '修改', data: row},
            {clickIndex: 'delete', headIcon: 'shanchu', label: '删除', data: row}
          ];
          contextParams(event);
        },
        modifySetting = async (id) => {
          let {data} = await saveSettings(pageData.form_data);
          ElMessage.success({
            message: data.message,
            center: true
          })
          catchEvent('切片等值线工况组件--保存设置', 'modifySetting', pageData.form_data);
        },
        deleteSetting = async (id) => {
          let {data} = await deleteSettings(id);
          ElMessage.success({
            message: data.message,
            center: true
          })
          // 删除之后重新获取
          await getFormData();
          catchEvent('切片等值线工况组件--删除设置', 'deleteSetting', pageData.form_data);
        },
        closeTab=()=>{
          context.emit('closeTab');
        },
        reSetting = () => {
          catchEvent('切片等值线工况组件--重新布置', 'reSetting', pageData.form_data);
        },
        rotateUpDown = () => {
          catchEvent('切片等值线工况组件--上下翻转', 'rotateUpDown', pageData.form_data);
        },
        rotateLeftRight = () => {
          catchEvent('切片等值线工况组件--左右翻转', 'rotateLeftRight', pageData.form_data);
        },
        rotate = () => {
          catchEvent('切片等值线工况组件--旋转', 'rotate', pageData.form_data);
        },
        resetData = () => {
          catchEvent('切片等值线工况组件--回复默认', 'resetData', pageData.form_data);
          getFormData();
        }
    watchEffect(() => {
      let {name, font_height, font_size, number_format, decimal, rotate, show_Bz, show_Dz} = pageData.form_data;
      context.emit('receiveSliceConditionData', {
        name,
        font_height,
        font_size,
        number_format,
        decimal,
        rotate,
        show_Bz,
        show_Dz
      });
      catchEvent('切片等值线工况组件--数据变化','receiveSliceConditionData',pageData.form_data);
    })
    onMounted(() => {
      getFormData();
    });
    return {
      pageData,
      changeSelect,
      getBzList,
      clickEvent,
      openRightMenu,
      closeMenu,
      modifySetting,
      deleteSetting,
      reSetting,
      rotateUpDown,
      rotateLeftRight,
      rotate,
      resetData,
      edit_input,
      editBzValue,
      closeTab
    }
  }
}
</script>

<style scoped lang="less">
@background-color: #06ceae;
@popUpColor: rgba(18, 33, 46, 0.8);
@popUpBorderColor: rgb(18, 33, 46);
.SliceCondition {
  width: 300px;
  background: rgba(18,33,46,.7);
  border: 1px solid #12212e;
  padding: 0 20px 20px;
  border-radius: 5px;
  position: relative;

  &:after {
    content: "";
    display: inline-block;
    width: 96%;
    height: 4px;
    border: 4px solid @background-color;
    border-left-color: rgba(18, 33, 46, 0);
    border-right-color: rgba(18, 33, 46, 0);
    border-bottom-color: rgba(18, 33, 46, 0);
    position: absolute;
    left: 0;
    top: -1px;
    z-index: 10;
  }

  .title {
    color: white;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid black;
    margin-bottom: 8px;
  }
  .top_title {
    font-size: 14px;
    color: white;
    margin: 10px 0;
  }

  .form_gk {
    border: 1px solid rgba(36,48,57,.6);
    padding-right: 4px;
    padding-left: 4px;
    border-radius: 6px;
    margin-bottom: 10px;

    .form_title {
      color: white;
      margin: 10px 0;
      font-size: 14px;
    }
  }
}

.el-form-item {
  margin-bottom: 12px;
}

.font-color {
  --el-text-color-regular: white;
  --el-color-white: balck;
  --el-bg-color:@background-color;
  --el-color-primary: @background-color;
}
.el-button--primary{
  background-color: @background-color;
  color: white;
  border-color: @background-color;
}
.el-button--success{
  border-color:@background-color;
  color: @background-color;
  background-color: transparent;
}
</style>
